import {FlatList, ListRenderItem, Text, View} from 'react-native';
import {useEffect, useState} from 'react';
import service, {getRequest} from '../../../api';
import api from '../../../api';
import {Icon} from '@rneui/themed';
import {TreeListItem} from './TreeListItem.tsx';

export function Tree() {
  const [tree, setTree] = useState<TreeResponse[]>([]);

  useEffect(() => {
    getRequest<TreeResponse[]>('tree/json').then(treeList => {
      setTree(treeList);
    });
  }, []);

  const renderTreeItem = (item: ListRenderItem<TreeResponse>) => {
    return <TreeListItem name={item.item.name} children={item.item.children} />;
  };

  return (
    <View style={{flex: 1}}>
      <FlatList
        style={{flex: 1}}
        data={tree}
        renderItem={renderTreeItem}
        keyExtractor={item => item.id}
        ItemSeparatorComponent={
          <View
            style={{
              height: 1,
              width: '100%',
              backgroundColor: '#1f000000',
              paddingHorizontal: 20,
            }}
          />
        }
      />
    </View>
  );
}
